<script lang="ts" setup name="SearchPage">
 const  search=reactive({
   keyword:'',
   list:[1,2]
 });
</script>
<template>
  <div class='search-container'>
    <nav-header class="header">
      <template #middle>
        <div class="middle">
          <van-field
            clearable
            v-model="search.keyword"
            type='text'
            placeholder="请输入"
          />
        </div>
      </template>
    </nav-header>
    <div class='content'>
      <div class='search-list' v-if='search.list.length>0'>
        <van-cell-group class='search-list-item' title="市场" >
          <van-cell   value="内容" >
            <template #title>
               <div class='left'>
                 <img src='@/assets/images/icon/icon-home-list-btc.png' alt=''>
                 <div class='info'>
                   <div class='title'>SQQQ</div>
                   <div class='desc'>ProshareProshareProshare</div>
                 </div>
               </div>
            </template>
            <template #value>
              <div class='btn-trading'>交易</div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>

      <van-empty
        v-else
        description="未找到结果"
      >
        <template #image>
          <img class='img-nodata' src='@/assets/images/icon/icon-nodata.png' />
        </template>
      </van-empty>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.search-container{
  display: flex;
  flex-direction: column;
  height: 100vh;
  .header{
    :deep(.middle){
        width: 85%;
      }
    :deep(.nav-header_right){
       display: none;
     }
    :deep(.van-field__clear){
      color: #979EAB;
    }
  }
  .content{
    flex: 1;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .search-list{
      width: 100%;
      margin-top:10px;
      :deep(.van-cell-group__title){
        color: #2C2C2C;
        font-size: 8px;
        font-weight: 400;
        padding-left: 0;
      }

      &-item{
        .van-cell{
          padding-left: 0;
          padding-right: 0;
        }
         &::after{
           border-top: none;
         }
        .left{
          display: flex;
          align-items: center;
          flex: 1;
          img{
            flex-shrink: 0;
            width: 18px;
            margin-right: 4px;
          }
          .info{
            flex: 1;
            max-width: 90px;
            display: flex;
            flex-direction: column;
            .title{
              max-width: 100%;
              font-weight: bold;
              font-size: 8px;
              color: #2C2C2C;
              display: inline-block;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .desc{
              max-width: 100%;
              font-size: 7px;
              color: #2C2C2C;
              display: inline-block;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
        :deep(.van-cell__value){
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .btn-trading{
            cursor: pointer;
            border: 1px solid #DDDDDD;
            border-radius: 30px;
            color: #1642F4;
            font-size: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 24px;
          }
        }
      }
    }
    .img-nodata{
      width: 70px;
      height: auto;
    }
    :deep(.van-empty__description){
      margin-top: 0;
      font-size: 8px;
    }
  }
}
</style>
